<template>
    <el-container>
        <el-header>
            <ul class="header-con flex">
                <li class="nav-item">
                    <router-link to="/" style="margin-right: 24px">
                        <img data-v-4c5e2361="" src="https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金"
                             class="logo-img">
                    </router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/">首页</router-link>
                </li>
                <li class="nav-item search">
                    <div class="search-con">
                        <el-input v-model="keyword" @clear="onclick_search" placeholder="搜索文章" class="search-input"
                                  clearable></el-input>
                        <!--                        <input type="text" v-model="keyword" placeholder="搜索文章" class="search-input">-->
                        <i class="el-icon-search" style="padding: 0 6px" @click="onclick_search"></i>
                    </div>
                </li>

                <li class="nav-item">
                    <router-link to="/editor/new" v-if="userInfo.id">
                        <button class="write-btn">写文章</button>
                    </router-link>
                </li>
                <li class="nav-item" v-if="userInfo.id">
                    <el-popover
                            placement="bottom-end"
                            width="160"
                            trigger="click">
                        <ul class="userPopover">
                            <li>
                                <router-link :to="'/user/'+userInfo.id">
                                    <i class="iconfont iconwo"></i>
                                    <span>我的主页</span>
                                </router-link>
                            </li>
                            <li @click="onclick_logout">
                                <i class="iconfont iconexittuichu"></i>
                                <span>退出</span>
                            </li>
                        </ul>
                        <img :src="userInfo.avatar" :alt="userInfo.nickname" width="30" height="30"
                             slot="reference"
                             style="border-radius: 50%">
                    </el-popover>
                </li>
                <li class="nav-item" v-if="!userInfo.id">
                    <a href="javascript:void(0);" @click="onclick_showAuthForm(isLogin=true)"
                       style="padding: 0 8px">登录</a>
                    <a href="javascript:void(0);" @click="onclick_showAuthForm(isLogin=false)">注册</a>
                </li>
            </ul>
        </el-header>
        <el-main>
            <div class="main-container">
                <router-view></router-view>
            </div>
        </el-main>
        <!--    注册登录组件-->
        <AuthForm v-if="showAuthForm" :isLogin="isLogin" @onclose="showAuthForm=false"></AuthForm>
    </el-container>
</template>
<script>
    import {TOKEN_KEY} from "../plugins/http";
    import User from "@/components/User.vue";
    import AuthForm from "@/components/AuthForm";
    import event from "../plugins/event";

    export default {
        name: "main",
        inject: ['reload'],
        components: {
            User, AuthForm
        },
        data() {
            return {
                showAuthForm: false,
                isLogin: false,
                keyword: ''
            }
        },
        mounted() {
            this.getUserInfo();
        },
        computed: {
            userInfo() {
                return this.$store.state.user || {};
            }
        },
        methods: {
            getUserInfo() {
                let token = localStorage.getItem(TOKEN_KEY);
                if (token) {
                    this.$store.dispatch("detail");
                }
            },
            onclick_logout() {
                // this.$router.replace({path: "/"})
                localStorage.removeItem(TOKEN_KEY);
                this.$store.dispatch("logout");
                this.reload()
            },
            onclick_showAuthForm(isLogin) {
                this.isLogin = isLogin
                this.showAuthForm = true;
            },
            onclick_search() {
                event.$emit('onsearch', this.keyword)
            },
        }
    };
</script>
<style lang="less">
    html {
        font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 16px;
        word-spacing: 1px;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
        background-color: #eeeeee;
    }

    .header-con {
        width: 960px;
        margin: auto;
        height: 100%;

        .nav-item {
            height: 100%;
            padding: 0 16px;
            display: flex;
            align-items: center;
        }
    }

    .search {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .search-con {
        /*border: 1px solid hsla(0, 0%, 59.2%, .2);*/
        /*background-color: rgba(227, 231, 236, .2);*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        /*border-radius: 2px;*/
    }


    .search-input {
        border: none;
        width: 10rem;
        /*padding: 7px 12px;*/
        box-shadow: none;
        outline: none;
        color: #666;
        background-color: transparent;
    }

    .el-header {
        padding: 0;
        background-color: #fff;
    }

    .el-footer {
        height: 200px;
        background-color: #cccccc;
    }

    .main-container {
        /*width: 960px;*/
        width: 800px;
        margin: 0 auto;
        background-color: #ffffff;
        min-height: 100vh;
    }

    .write-btn {
        color: #fff;
        background-color: #007fff;
        border-radius: 3px;
        height: 32px;
        padding: 0 10px;
    }

    .userPopover {
        li {
            font-size: 1rem;
            padding: 0.5rem;
        }

        li:hover {
            background-color: hsla(0, 0%, 94.9%, .5);
        }
    }
</style>
